<template>
  <el-main>
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input v-model="form.num" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="工单状态:">
          <el-select v-model="form.value" placeholder="请选择" clearable>
            <el-option label="待办" value="1"></el-option>
            <el-option label="进行" value="2"></el-option>
            <el-option label="取消" value="3"></el-option>
            <el-option label="完成" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <div class="btn-top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="dialogFormVisible = true"
          >新建</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="taskCode" label="工单编号" width="162">
        </el-table-column>
        <el-table-column prop="innerCode" label="设备编号" width="159">
        </el-table-column>
        <el-table-column prop="taskType.typeName" label="工单类型" width="159">
        </el-table-column>
        <el-table-column prop="createType" label="工单方式" width="159">
        </el-table-column>
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          label="工单状态"
          width="159"
        >
        </el-table-column>
        <el-table-column prop="userName" label="运营人员" width="159">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="160">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" prop="taskId">
          <template v-slot="{ row }">
            <el-button
              @click.native.prevent="deleteRow(row.taskId)"
              type="text"
              size="small"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <div>
          <span
            >共{{ totalCount }}条数据 第{{ pageIndex }}/{{ totalPage }}页</span
          >
          <button class="add" :class="{active:pageIndex==='1'}"  @click="addFn" ref="btn">上一页</button>
          <button class="next" :class="{active:pageIndex===totalPage}"  @click="nextFn">下一页</button>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增工单"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :before-close="closeFn"
    >
      <el-form
        ref="new"
        :model="dialogForm"
        label-width="98px"
        label-position="right"
        :rules="rules"
      >
        <el-form-item label="设备编号:" prop="innerCode">
          <el-input
            v-model="dialogForm.innerCode"
            label-width="180px"
            placeholder="请输入"
            show-word-limit
            maxlength="15"
            @input="getOperList"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型:" prop="productType">
          <el-select v-model="dialogForm.productType" placeholder="请选择">
            <el-option label="投放工单" :value="1"></el-option>
            <el-option label="补货工单" :value="2"></el-option>
            <el-option label="维修工单" :value="3"></el-option>
            <el-option label="撤机工单" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="运营人员:" prop="assignorId">
          <el-select v-model="dialogForm.assignorId" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            type="textarea"
            v-model="dialogForm.desc"
            maxlength="40"
            :rows="3"
            resize="none"
            show-word-limit
            placeholder="请输入备注（不超过40字）"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="onConfig">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="工单详情"
      :visible.sync="dialogWorkDetails"
      :append-to-body="true"
      :close-on-click-modal="false"
      id="work-details"
      v-if="show"
    >
      <div class="top">
        <img
          :src="
            typeName === '取消'
              ? ''
              : ''
          "
          alt=""
        />
        <span>{{ typeName }}</span>
        <img
          :src="
            typeName === '取消'
              ? 'http://likede2-admin.itheima.net/img/pic_3.e8208e34.png'
              : 'http://likede2-admin.itheima.net/img/pic_1.834b274c.png'
          "
          alt=""
          class="pic"
        />
      </div>
      <el-form :model="workDetails" label-width="125px" label-position="right" :inline="true">
        <el-form-item label="设备编号：">
          <span>{{workDetails.innerCode}}</span>
        </el-form-item>
        <el-form-item label="创建日期：">
          <span>{{workDetails.createTime.replace(/[-]/g, '.')
          .replace(/[T]/, ' ')}}</span>
        </el-form-item>
        <el-form-item label="取消日期：" v-if="typeName==='取消'">
          <span>{{workDetails.updateTime.replace(/[-]/g, '.')
          .replace(/[T]/, ' ')}}</span>
        </el-form-item>
        <el-form-item label="运营人员：">
          <span>{{workDetails.userName}}</span>
        </el-form-item>
        <el-form-item label="工单类型：">
          <span>{{workDetails.taskType.typeName}}</span>
        </el-form-item>
        <el-form-item label="工单方式：">
          <span>{{workDetails.createType?'手动':'自动'}}</span>
        </el-form-item>
              <el-form-item label="取消原因：" v-if="typeName==='取消'">
        </el-form-item>
          <el-form-item label="备注：" v-if="typeName==='待办'">
          <span>{{workDetails.desc}}</span>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onConfigFn" >{{typeName==='取消'?'重新创建':'取消工单'}}</el-button>
      </div>
    </el-dialog>

       <el-dialog
      :visible.sync="centerDialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      id="center"
    >
  <span><i class="icon icon-jurassic_warn" style="color:#ff665f"></i> 取消工单后,将不能恢复，是否确认取消？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogFn">确 定</el-button>
  </span>
</el-dialog>
  </el-main>
</template>

<script>
import { Message } from 'element-ui'
import {
  getSearch,
  getRepairerList,
  postCreate,
  getTaskInfo,
  postCancel
} from '@/api/article'
import { getId } from '@/utils/storage'
export default {
  data () {
    return {
      loading: true,
      num: 10,
      goodData: [],
      getGoodData: [],
      rules: {
        innerCode: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        productType: [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
          }
        ],
        assignorId: [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
          }
        ],
        desc: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ]
      },
      dialogFormVisible: false,
      dialogTableVisible: false,
      dialogLimitNumber: false,
      dialogWorkDetails: false,
      watchDetails: false,
      centerDialogVisible: false,
      limitNumber: 0,
      dialogForm: {
        innerCode: '',
        assignorId: '',
        productType: '',
        desc: ''
      },
      formLabelWidth: '120px',
      type: ['自动', '手动'],
      form: {
        num: '',
        value: ''
      },
      tableData: [],
      pageIndex: '',
      totalPage: '',
      totalCount: '',
      userList: [],
      workDetails: {},
      show: false,
      typeName: ''
    }
  },
  async created () {
    this.getFn(1)
  },
  mounted () {
  },
  methods: {
    async deleteRow (taskId) {
      this.dialogWorkDetails = true
      this.workDetails = await getTaskInfo(taskId)
      this.typeName = this.workDetails.taskStatusTypeEntity.statusName
      this.show = true
    },
    closeFn () {
      this.dialogFormVisible = false
      this.$refs.new.resetFields()
    },
    async getOperList (val) {
      if (val) {
        const res = await getRepairerList(val)
        if (res) {
          this.userList = res
        }
      }
    },
    onConfigFn () {
      if (this.typeName === '取消') {
        this.getOperList(this.workDetails.innerCode)
        this.dialogWorkDetails = false
        this.dialogFormVisible = true
        this.dialogForm.innerCode = this.workDetails.innerCode
        this.dialogForm.productType = this.workDetails.productTypeId
        this.dialogForm.assignorId = this.workDetails.assignorId
        this.dialogForm.desc = this.workDetails.desc
      } else if (this.typeName === '待办') {
        this.centerDialogVisible = true
      } else {
        this.dialogWorkDetails = false
      }
    },
    async onConfig () {
      console.log(this.dialogForm)
      const valid = await this.$refs.new.validate()
      if (valid) {
        const data = this.dialogForm
        data.userId = getId()
        data.createType = 1
        data.details = this.goodData
          ?.map((item) => {
            if (item.skuName !== '-') {
              delete item.max
              delete item.count
              delete item.add
              return item
            }
            return null
          })
          .filter((item) => item)

        try {
          await postCreate(data)
          this.getFn(1)
          this.closeFn()
        } catch (error) {
          Message({
            message: error.response.data,
            type: 'error',
            customClass: 'message'
          })
        }
      }
    },
    async getFn (num, code, status) {
      const res = await getSearch({
        pageIndex: num,
        pageSize: 10,
        isRepair: false,
        taskCode: code,
        status
      })
      this.pageIndex = res.pageIndex
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      res.currentPageRecords.forEach((item, i) => {
        item.createType = item.createType ? '手动' : '自动'
        item.index = (res.pageIndex - 1) * 10 + i + 1
        if (!item.taskType) {
          item.taskType = {}
          item.taskType.typeName = '补货工单'
        }
      })
      res.currentPageRecords.forEach((item) => {
        item.createTime = item.createTime
          .replace(/[-]/g, '.')
          .replace(/[T]/, ' ')
      })
      this.tableData = res.currentPageRecords
      this.loading = false
    },
    onSubmit () {
      this.getFn(1, this.form.num, this.form.value)
    },
    addFn () {
      if (this.pageIndex === 1) {
        return
      }
      const num = Number(this.pageIndex) - 1
      this.getFn(num, this.form.num, this.form.value)
    },
    nextFn () {
      if (this.totalCount === this.totalPage) {
        return
      }
      const num = Number(this.pageIndex) + 1
      this.getFn(num, this.form.num, this.form.value)
    },
    centerDialogFn () {
      this.centerDialogVisible = false
      this.dialogWorkDetails = false
      const code = this.workDetails.taskId

      postCancel({
        taskId: code,
        desc: ''
      }, code)
      this.getFn(1)
    }
  }
}
</script>

<style lang="less" scoped>
.message {
  z-index: 99999;
}

/deep/ .el-dialog {
  width: 630px;
  height: 430px;
  border-radius: 10px;
  .el-dialog__title {
    font-size: 16px;
    font-weight: 700;
  }
  .el-dialog__body {
    padding: 15px 20px 0px;
    label,
    input {
      line-height: 36px !important;
      height: 36px !important;
    }
    input {
      width: 400px;
    }
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 13px;
    left: 0;
    width: 100%;
    button {
      height: 36px !important;
      width: 80px !important;
      margin: 0 18px;
    }
    text-align: center;
    .el-button--primary {
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      border: none;
      text-indent: -2.5px;
      &:hover {
        background: linear-gradient(135deg, #ff7d43, #db3602) !important;
      }
    }
    .el-button--default {
      background-color: #fbf4f0;
      border: none;
      color: #655b56 !important;
      text-indent: -8px;
      &:hover {
        background-color: #f3e7e1 !important;
      }
    }
  }
  form {
    padding: 0 50px 0 40px;
    label {
      padding-right: 22px;
    }
  }
}
.el-main {
  width: calc(100vw - 160px);
  min-height: 100%;
  background-color: #f8fafd;
  .search {
    width: 100%;
    height: 62px;
    padding-left: 17px;
    padding-top: 13px;
    background-color: #fff;
    /deep/ .el-form {
      label,
      input {
        line-height: 36px !important;
        height: 36px !important;
      }
      button {
        margin-top: 3px;
        height: 36px !important;
        background-color: #5f84ff;
        border-color: #5f84ff;
        width: 80px;
        text-indent: -3px;
      }
    }
  }
  /deep/ .main {
    min-height: 673px;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    .btn-top {
      height: 36px !important;
      margin-bottom: 20px;
      button {
        height: 36px !important;
        width: 80px !important;
      }
      .el-button--primary {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
        border: none;
        text-indent: -2.5px;
        &:hover {
          background: linear-gradient(135deg, #ff7d43, #db3602) !important;
        }
      }
      .el-button--default {
        background-color: #fbf4f0;
        border: none;
        color: #655b56 !important;
        text-indent: -8px;
        &:hover {
          background-color: #f3e7e1 !important;
        }
      }
    }
    .el-table {
      td,
      tr,
      th {
        color: #666;
        font-weight: 400;
        text-align: center;
        border: none !important;
      }
      th {
        background-color: #f3f6fb !important;
      }
    }
    .footer {
      height: 96px;
      padding: 32px;
      > div {
        display: flex;
        height: 32px;
        span {
          flex: 1;
          color: #dbdfe5;
          font-size: 16px;
        }
        button {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          font-size: 13px;
          text-align: center;
          line-height: 32px;
          border: none;
          cursor: pointer;
          border-radius: 3px;
        }
        .add {
          background: #edf0f9;
       color: #606266;
        }
        .next {
          color: #606266;
          background-color: #d5ddf8;
        }
        .active{
      color: #d8dde3 !important;
      cursor: not-allowed;
        }
      }
    }
  }
}
#workpei {
  /deep/.el-dialog {
    height: 214px !important;
  }
  .el-input-number {
    width: 400px;
  }
}
#work-details {
    /deep/.el-dialog {
    height: 415px !important;
  }
  .top {
    display: flex;
    align-items: center;
    height: 54px;
    background-color: #f8f8f8;
    img {
      margin: 0 22px;
    }
    span {
      width: 320px;
    }
    .pic {
      margin-top: -6px;
    }
  }
 /deep/ .el-form{
  padding: 30px 10px 10px;
  .el-form-item{
    margin-bottom: 8px;
  }
      .el-form-item__content{
    width: 140px;
    height: 36px;
    line-height: 36px;
  }
  }
}
#center{
  /deep/  .el-dialog {
    padding: 0 18px 42px 17px;
            margin-top: 29vh !important;
    height: 165px !important;
    width: 409px;
span{
  font-size: 16px;
  i{
    margin-right: 12px;
  }
}
  }
}
</style>
